<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    .all_patient {
        height: 2rem;
        line-height: 2rem;
        background-color: #fff;
        width: 100%;
        color: #565656;
        font-size: 0.7rem;
    }

    .all_patient .icon {
        width: 0.8rem;
        height: 0.8rem;
        margin: -0.1rem 0.5rem 0 0.8rem;
    }

    .all_patient .arrow {
        float: right;
        margin: 0.5rem 0.85rem 0 0.5rem;
        width: 0.4rem;
        height: 0.8rem;
    }

    .all_patient .time {
        float: right;
    }

    .zuijin_huanzhe {
        width: 96%;
        padding-left: 4%;
        line-height: 1.5rem;
        height: 1.aui-col-5;
        color: #838383;
        font-size: 0.6rem;
    }

    .patient {
        background-color: #FFF;
        padding: 0 0.8rem;
    }

    .patient .patient_item {
        border-bottom: 1px solid #e8e8e8;
        height: 2.5rem;
        line-height: 2.5rem;
        color: #565656;
        font-size: 0.7rem;
    }

    .patient .patient_item img {
        width: 1.85rem;
        height: 1.85rem;
        margin-right: 0.5rem;
        border-radius: 50%;
    }

    .patient .patient_item .time {
        float: right;
        color: #838383;
        font-size: 0.6rem;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <div class="placeholder_div"></div>
        <!-- <div class="all_patient">
            <img class="icon" src="../image/icon_my_patient.png" alt="">
            全部患者
            <img class="arrow" src="../image/arrow_right.png" alt="">
            <span>{{data_length}}人</span>
        </div> -->

        <div class="zuijin_huanzhe">最近患者</div>


        <div class="patient">

            <div class="patient_item" @click="go_patient_bingli_win(item.friendsUid)" v-if="!select_patient"
                v-for="item in firend_data">
                <img v-if="item.friendsAvatar" :src="item.friendsAvatar" alt="">
                <img v-else src="../image/user_avater.png" alt="">
                <span v-if="item.friendsName">{{item.friendsName}}</span>
                <span v-else>匿名</span>

                <span class="time">{{item.updateTime}}</span>

            </div>
            <div class="patient_item" v-if="select_patient" v-for="item in firend_data"
                @click="send_uid(item.friendsUid,item.friendsName)">
                <img v-if="item.friendsAvatar" :src="item.friendsAvatar" alt="">
                <img v-else src="../image/user_avater.png" alt="">
                <span v-if="item.friendsName">{{item.friendsName}}</span>
                <span v-else>匿名</span>
                <span class="time">{{item.updateTime}}</span>
            </div>




        </div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        get_friend() // 获取好友/患者数据
        // alert(api.pageParam.select_patient)

        if (api.pageParam.select_patient) {
            app.select_patient = api.pageParam.select_patient
        } else {
            app.select_patient = false
        }

    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            firend_data: [], // 好友/患者的数组
            data_length: 0, // 好友患者数量总计
            select_patient: false, // 区分过来的页面
        },
        methods: {
            send_uid: function (uid, name) {
                api.sendEvent({
                    name: 'select_patient_on',
                    extra: {
                        uid: uid,
                        name: name,
                    }
                });
                api.closeWin()
            },
            go_patient_bingli_win: function (id) {
                api.openWin({
                    name: "patient_bingli_win",
                    url: "patient_bingli_win.html",
                    pageParam: {
                        id: id
                    }
                })
            }
        },

    })

    // 获取好友/患者数据
    function get_friend() {
        get_ajax("im/my-friend", {
            uid: $api.getStorage("emp").userId
        }, function (res, err) {
            if (res.code == 200) {
                var firend_data = res.data
                for (key in firend_data) {
                    if (firend_data[key].friendsAvatar) {
                        firend_data[key].friendsAvatar = IMAGE_HTTP + firend_data[key].friendsAvatar;
                    }
                }
                app.firend_data = firend_data;
                app.data_length = res.data.length

                app.$nextTick(function () {
                    hb_init_openwinby_click();
                })
            }

        })
    }
</script>